<template>
    <view class="pages" :class="GlobalThemes.backGroundColor">
        <view class="search-top-box" id="navbar">
            <u-navbar
                back-icon-color="#ffffff"
                :is-back="false"
                :border-bottom="false"
                :background="typelist[tabIndex].background"
            >
                <view class="mp-name">
                    <text>{{ i18n('index').appName }}</text>
                </view>
                <view class="slot-wrap"><view class="search-wrap"></view></view>
            </u-navbar>
        </view>
        <view class="sun-index">
            <view class="sun-logo-box">
                <view
                    class="sun-logo"
                    :style="{ backgroundColor: typelist[tabIndex].color }"
                >
                    <image
                        class="sun-icon-img"
                        src="@/static/imgs/moom_white.png"
                    />
                </view>
            </view>
            <view class="sun-login-box">
                <view class="sun-label">
                    <image
                        style="width: 28rpx;height:39rpx;"
                        src="@/static/imgs/mobile_icon.png"
                    />
                    <text
                        class="label-text"
                        :style="{ color: typelist[tabIndex].color }"
                    >
                        登录帐号(中文或字母开头)
                    </text>
                </view>
                <view class="sun-input-box">
                    <input
                        v-model="username"
                        type="text"
                        placeholder="请输入登录帐号"
                        placeholder-class="placeholder-class"
                    />
                    <image
                        @click="username = ''"
                        class="close-icon"
                        src="@/static/imgs/close_icon.png"
                    />
                </view>
            </view>
            <!-- <view class="sun-login-box">
                <view class="sun-label">
                    <image style="width: 29rpx;height:29rpx;" src="@/static/imgs/code_icon.png" />
                    <text class="label-text" :style="{ color: typelist[tabIndex].color }">验证码</text>
                </view>
                <view class="sun-input-box">
                    <input v-model="code" type="text" placeholder="请输入验证码" placeholder-class="placeholder-class" />
                    <text
                        :style="{ color: typelist[tabIndex].color }"
                        class="code-text"
                        :class="{ gray: showTime }"
                        @click="handleGetCodeClick"
                    >
                        {{ showTime ? currentCountTime + 's后重新获取' : '获取验证码' }}
                    </text>
                </view>
            </view> -->
            <view class="sun-login-box">
                <view class="sun-label">
                    <image
                        style="width: 29rpx;height:37rpx;"
                        src="@/static/imgs/pwd_icon.png"
                    />
                    <text
                        class="label-text"
                        :style="{ color: typelist[tabIndex].color }"
                    >
                        登录密码(密码长度6~12位)
                    </text>
                </view>
                <view class="sun-input-box">
                    <input
                        v-model="password"
                        type="text"
                        placeholder="请输入登录密码"
                        placeholder-class="placeholder-class"
                    />
                    <image
                        @click="password = ''"
                        class="close-icon"
                        src="@/static/imgs/close_icon.png"
                    />
                </view>
            </view>
            <view class="sun-login-box">
                <view class="sun-label">
                    <image
                        style="width: 29rpx;height:37rpx;"
                        src="@/static/imgs/pwd_icon.png"
                    />
                    <text
                        class="label-text"
                        :style="{ color: typelist[tabIndex].color }"
                    >
                        验证密码
                    </text>
                </view>
                <view class="sun-input-box">
                    <input
                        v-model="passwordd"
                        type="text"
                        placeholder="请再次输入密码"
                        placeholder-class="placeholder-class"
                    />
                    <image
                        @click="passwordd = ''"
                        class="close-icon"
                        src="@/static/imgs/close_icon.png"
                    />
                </view>
            </view>
            <view class="sun-login-box">
                <view class="sun-label">
                    <image
                        style="width: 29rpx;height:37rpx;"
                        src="@/static/imgs/pwd_icon.png"
                    />
                    <text
                        class="label-text"
                        :style="{ color: typelist[tabIndex].color }"
                    >
                        绑定小程序(可选)
                    </text>
                </view>
                <view class="sun-input-box">
                    <input
                        v-model="openid"
                        type="text"
                        placeholder="请输入小程序Openid(小程序内点击头像复制)"
                        placeholder-class="placeholder-class"
                    />
                    <image
                        @click="openid = ''"
                        class="close-icon"
                        src="@/static/imgs/close_icon.png"
                    />
                </view>
            </view>
            <view class="sun-tip">
                <text
                    class="sun-tip-text"
                    :style="{ color: typelist[tabIndex].color }"
                    @click="goLogin"
                >
                    已有帐号？去登录
                </text>
            </view>
            <view class="login-btn-box">
                <view
                    class="login-btn"
                    @click="handleSubmit"
                    :style="{ backgroundColor: typelist[tabIndex].color }"
                >
                    注册/绑定
                </view>
            </view>
        </view>
    </view>
</template>

<script>
const MyApp = getApp();
const globalData = MyApp.globalData;
export default {
    data() {
        return {
            tabIndex: 0,
            typelist: globalData.typelist,
            username: '',
            password: '',
            passwordd: '',
            openid: '',
            code: '',
            countTime: 60,
            currentCountTime: 0,
            showTime: false,
            timeId: null
        };
    },
    computed: {
        i18n() {
            return globalData.$t;
        }
    },
    onShow() {
        let _this = this;
        _this.tabIndex = uni.getStorageSync('tabIndex') || 0;
    },
    created() {
        this.currentCountTime = this.countTime;
    },
    onLoad() {},
    methods: {
        handleSubmit() {
            if (!this.username){
                return uni.showToast({
                    title: '请输入登录帐号',
                    icon: 'none',
                    duration: 1500
                });
            }
            
            if (this.password.length < 6 || this.password.length > 20) {
                return uni.showToast({
                    title: '密码长度6~12位',
                    icon: 'none',
                    duration: 1500
                });
            }
                
            // if (!this.code) return uni.showToast({ title: '请输入验证码', icon: 'none', duration: 1500 });
            if (!this.password) {
                return uni.showToast({
                    title: '请输入登录密码',
                    icon: 'none',
                    duration: 1500
                });
            }
                
            if (this.passwordd != this.password) {
                return uni.showToast({
                    title: '两次密码填写不一致',
                    icon: 'none',
                    duration: 1500
                });
            }
            let userinfo = {
                account: this.username,
                password: this.password,
                openid: this.openid,
                type: 'reg'
            };
            this.$http
                .post('/user/auth/dosth', userinfo)
                .then(res => {
                    if (res.code != 200) {
                        this.$u.toast(res.msg || '注册失败');
                        return false;
                    }
                    uni.setStorageSync('userInfo', res.data);
                    uni.setStorageSync('token', res.data.token);
                    this.$u.toast('注册/绑定成功');
                    uni.reLaunch({
                        url: '/pages/user/index'
                    });
                })
                .catch(v => {
                    console.log(v);
                });
        },
        handleGetCodeClick() {
            this.showTime = true;
            if (this.showTime && this.currentCountTime !== this.countTime)
                return;
            this.currentCountTime;
            this.timeId = setInterval(() => {
                if (this.currentCountTime <= 0) {
                    this.currentCountTime = this.countTime;
                    this.showTime = false;
                    clearInterval(this.timeId);
                }
                this.currentCountTime--;
            }, 1000);
        },
        goLogin() {
            uni.redirectTo({
                url: '/packageA/pages/user/applogin'
            });
        }
    }
};
</script>

<style scoped>
.sun-logo-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 750rpx;
    height: 300rpx;
}
.sun-icon-img {
    width: 120rpx;
    height: 120rpx;
}
.sun-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180rpx;
    height: 180rpx;
    border-radius: 15rpx;
}
.close-icon {
    width: 36rpx;
    height: 34rpx;
}
.sun-login-box {
    padding: 20rpx 60rpx;
}
.sun-label {
    display: flex;
    align-items: center;
}
.label-text {
    margin-left: 16rpx;
    font-weight: 500;
    color: #272e2d;
    font-size: 30rpx;
}
.sun-input-box {
    display: flex;
    align-items: center;
    height: 100rpx;
    border-bottom: 1rpx solid #eee;
    padding: 0px 10rpx;
}
.sun-input-box input {
    flex: 1;
}
.placeholder-class {
    font-size: 30rpx;
    color: #c0c0c0;
}
.sun-tip {
    display: flex;
    justify-content: flex-end;
    padding: 0rpx 68rpx;
}
.login-btn-box {
    bottom: 129rpx;
    width: 750rpx;
    padding: 50rpx 68rpx 0rpx;
}
.login-btn {
    height: 82rpx;
    border-radius: 41rpx;
    text-align: center;
    line-height: 82rpx;
    font-size: 36rpx;
    font-weight: 500;
    color: #fff;
}
.code-text {
    font-size: 28rpx;
    color: #30c6b3;
}
.gray {
    color: #c0c0c0;
}
</style>
<style lang="scss">
.pages {
    .search-top-box {
        .mp-name {
            color: #fff;
            flex: 1;
            padding-left: 40upx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .slot-wrap {
            display: flex;
            align-items: center;
            flex: 1;

            .search-wrap {
                flex: 1;
                margin: 0 20upx;
            }
        }
    }
}
</style>
